<template>
  <div id="shop">
    <Header>
      <template #tupian>
        <img src="../assets/images/返回1.png" alt="">
      </template>
      <template #wenzi>
        <p>购物车</p>
      </template>
    </Header>
    <nav style="padding-top:1.29rem;">
      <div class="quanxuan">
        <div class="left">
          <van-checkbox v-model="checked" @click="checkAll" icon-size="0.4rem"></van-checkbox>
          <span>全选</span>
        </div>
        <div class="right">
          编辑
        </div>
      </div>

      <div class="zhanwei">

      </div>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div class="shangpin">
          <div class="anniu">
            <van-checkbox name="a" icon-size="0.4rem"></van-checkbox>
          </div>
          <div class="tupian">
            <img src="../assets/images/5-结算 (1).png" alt="">
          </div>
          <div class="wenzi">
            <div class="one">
              <div class="left">
                莫次有机PWE活性美白洗
              </div>
              <div class="right">
                ￥169
              </div>
            </div>
            <div class="two">
              <div class="left">
                面奶优惠套装
              </div>
              <div class="right">
                x2
              </div>
            </div>
            <div class="three">
              标准套装+蓝色
            </div>
          </div>
        </div>
        <div class="shangpin">
          <div class="anniu">
            <van-checkbox name="b" icon-size="0.4rem"></van-checkbox>
          </div>
          <div class="tupian">
            <img src="../assets/images/4-放入购物车 (1).png" alt="">
          </div>
          <div class="wenzi">
            <div class="one">
              <div class="left">
                莫次有机PWE活性美白洗
              </div>
              <div class="right">
                ￥169
              </div>
            </div>
            <div class="two">
              <div class="left">
                面奶优惠套装
              </div>
              <div class="right">
                x2
              </div>
            </div>
            <div class="three">
              标准套装+蓝色
            </div>
          </div>
        </div>
        <div class="shangpin">
          <div class="anniu">
            <van-checkbox name="c" icon-size="0.4rem"></van-checkbox>
          </div>
          <div class="tupian">
            <img src="../assets/images/5-结算 (1).png" alt="">
          </div>
          <div class="wenzi">
            <div class="one">
              <div class="left">
                莫次有机PWE活性美白洗
              </div>
              <div class="right">
                ￥169
              </div>
            </div>
            <div class="two">
              <div class="left">
                面奶优惠套装
              </div>
              <div class="right">
                x2
              </div>
            </div>
            <div class="three">
              标准套装+蓝色
            </div>
          </div>
        </div>
        <div class="shangpin">
          <div class="anniu">
            <van-checkbox name="d" icon-size="0.4rem"></van-checkbox>
          </div>
          <div class="tupian">
            <img src="../assets/images/4-放入购物车 (1).png" alt="">
          </div>
          <div class="wenzi">
            <div class="one">
              <div class="left">
                莫次有机PWE活性美白洗
              </div>
              <div class="right">
                ￥169
              </div>
            </div>
            <div class="two">
              <div class="left">
                面奶优惠套装
              </div>
              <div class="right">
                x2
              </div>
            </div>
            <div class="three">
              标准套装+蓝色
            </div>
          </div>
        </div>
      </van-checkbox-group>


      <div class="di">
        <div class="left">

          <span>应付金额：</span> ￥338.00
        </div>
        <div class="right">
          付款
        </div>
      </div>


    </nav>
    <Footer :active="1"></Footer>
  </div>
</template>
<script>
import Footer from '../components/footer.vue'
import Header from '../components/header.vue'
export default {
  data() {
    return {
      checked: false,
      result: [],
    };
  },
  methods: {
    checkAll() {
      if (this.$refs.checkboxGroup.toggleAll == false) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }

    },
  },
  components: {
    Footer,
    Header
  }
}

</script>

<style lang="less" scoped>
nav {
  background-color: #fff;

  .quanxuan {
    height: 0.96rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0.4rem;

    .left {
      input {
        width: 0.33rem;
        height: 0.33rem;
      }

      display: flex;

      span {
        margin-left: 0.27rem;
        font-size: 0.32rem;
        font-family: PingFang;
        font-weight: 500;
        color: #444444;
      }
    }

    .right {
      width: 1.49rem;
      height: 0.53rem;
      line-height: 0.53rem;
      background: rgba(226, 87, 76, 0);
      border: 0.01px solid #DDDDDD;
      font-size: 0.27rem;
      font-family: PingFang;
      font-weight: 500;
      color: #888888;
      text-align: center;
    }
  }

  .shangpin {
    display: flex;
    border-bottom: 0.01rem solid #EEEEEE;
    padding: 0.4rem;
    position: relative;
    align-items: center;
    justify-content: space-between;

    .anniu {
      input {
        width: 0.33rem;
        height: 0.33rem;
      }
    }

    .tupian {
      width: 1.87rem;
      height: 1.87rem;
      background: #FFFFFF;
      border: 0.01rem solid #EEEEEE;
      margin-left: 0.19rem;

      img {
        width: 1.25rem;
        margin: 0.19rem 0 0 0.51rem;
      }
    }

    .wenzi {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 0.32rem;

      .one {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 6.49rem;

        .left {
          font-size: 0.4rem;
          font-family: PingFang;
          font-weight: 500;
          color: #444444;
          line-height: 0.59rem;
        }

        .right {
          font-size: 0.4rem;
          font-family: PingFang;
          font-weight: 500;
          color: #000000;
        }
      }

      .two {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: 6.49rem;

        .left {
          font-size: 0.4rem;
          font-family: PingFang;
          font-weight: 500;
          color: #444444;
          line-height: 0.59rem;
        }

        .right {
          font-size: 0.32rem;
          font-family: PingFang;
          font-weight: 500;
          color: #AAAAAA;
        }
      }

      .three {
        font-size: 0.32rem;
        font-family: PingFang;
        font-weight: 500;
        color: #AAAAAA;
      }
    }
  }


  .zhanwei {
    height: 0.27rem;
    background-color: #efeff4;
  }


}
.di {
  position: fixed;
        bottom: 1.31rem;
            width: 10rem;
            height: 1.17rem;
            display: flex;
            background: #fff;
            border-top: 0.01rem solid #dddddd;
            line-height: 1.17rem;
            text-align: center;
    
            .left {
                width: 5rem;
                height: 1.17rem;
                background: #27353D;
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #FFFFFF;
    
                span {
                    font-size: 0.4rem;
                    font-family: PingFang;
                    font-weight: 500;
                    color: #FFFFFF;
                    opacity: 0.2;
    
                }
            }
    
            .right {
                width: 5rem;
                height: 1.17rem;
                background: #5293BA;
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
</style>